<template>
  <div class="video-com">
    <title-com :title="title"></title-com>
    <div class="video" v-if="data[0]">
      <video-com
        :src="getUrl(data[0].videoUrl)"
      ></video-com>
      <div class="text">
        {{data[0].title}}
      </div>
      <div class="more">
        <a :href="`#/news/shipin`">查看更多</a>
      </div>
    </div>
  </div>
</template>

<script>
  import titleCom from "./titleCom"
  import VideoCom from "@/components/videoCom";
  export default {
    props: ['title','data'],
    computed: {},
    data() {
      return {
        vedios(){
           this.data.some.find((item)=>{
               return item.videoUrl !== ''
           })
        }
      }
    },
    components: {
      titleCom,
      VideoCom
    },
    mounted() {

    },
    methods: {

    }
  }
</script>

<style lang="less">
  @import "~assets/style/public";

  .video-com {
    margin-left: 20/@size;
    .video-js{
      height: 305px !important;
    }
    .video{
      padding: 20/@size;
      .text{
        font-family: @font-first;
        font-size: @font-18;
        color: #000000;
        text-align: center;
        .over-flow-text();
        -webkit-line-clamp: 1;

      }
      .more{
        ont-family: @font-first;
        font-size: 16/@size;
        color:@theme-color;
        padding-top: 12/@size;
        display: flex;
        justify-content: flex-end;

        a {
          border-bottom: 1px solid @theme-color;
          cursor: pointer;
          color: @theme-color;
          text-decoration: none;
        }
      }
    }
  }

  @media (min-width: 320px) and (max-width: 767px) {
    .video-com {
      .video{
        .text{
          font-size: @font-24;
          .over-flow-text();
          -webkit-line-clamp: 2;
        }
        .more{
          font-size: @font-24;
          justify-content: center;
        }
      }
    }
  }


</style>
